import {Button, Card, DatePicker, Divider} from "antd-mobile";
import StartEndInput from "./StartEndInput";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCalendarAlt} from "@fortawesome/free-solid-svg-icons";
import {useState} from "react";
import dayjs from "dayjs";
import {fetchBusNo} from "./http/BusNoController";


const SelectStationCard = (props: any)=>{
    const [date, setDate] = useState<Date>(new Date());
    const [visible, setVisible] = useState(false);
    const [start, setStart] = useState<any>();
    const [end, setEnd] = useState<any>();

    const fetchBusNoData = () => {
      fetchBusNo(start, end, date)
          .then(res=> props.onComplete(res));
    }

    return (
        <Card style={{
            borderRadius: "1.6rem"
        }}>

            <StartEndInput //@ts-ignore
                start={start} end={end} setStart={setStart} setEnd={setEnd}/>
            <p onClick={()=>setVisible(true)}
               style={{
                   margin: "1rem 0"
               }}
            >
                <FontAwesomeIcon icon={faCalendarAlt}
                                 size={"2x"}
                                 color={"blue"}
                                 style={{margin: "0 1rem"}}
                />
                <span style={{
                    fontSize: "1.3rem",
                    letterSpacing: "2px"
                }}>
                    {dayjs(date).format("YYYY年MM月DD日")}
                </span>

            </p>
            <DatePicker value={date}
                        visible={visible}
                        onConfirm={val=> {
                            setDate(val);
                            setVisible(false);
                        }}
                        onCancel={()=>{
                            setVisible(false);
                        }}
            />
            <Divider style={{
                borderStyle: "dashed",
                borderWidth: "1px"
            }} />
            <Button block color={"primary"} size={"large"} style={{borderRadius: "999rem", margin: "1rem 0"}}
            onClick={fetchBusNoData}>立即查询</Button>
        </Card>
    );
}

export default SelectStationCard;
